<template>
  <div id="home">
    <div id="home-left">
      <h3><span class="p">P </span> &emsp;外卖商家中心</h3>
      <div id="tabs">
        <el-col>
          <el-menu
            :default-active="active"
            class="el-menu-vertical-demo"
            active-text-color=""
            background-color="white"
            text-color="black"
            unique-opened
            router
          >
            <!-- 首页 -->
            <!-- <router-link to="/Index">
              <el-menu-item index="Index">
                <i class="iconfont icon-solid-home"></i>
                <span slot="title">&emsp;后台首页</span>
              </el-menu-item>
            </router-link> -->

            <!-- 订单管理 -->

            <!-- <el-menu-item index="/Index/order">
              <i class="iconfont icon-065chakandingdan"></i>
              <span slot="title">&emsp;订单管理</span>
            </el-menu-item> -->

            <!-- 商品管理 -->
            <!-- <el-submenu index="3">
              <template slot="title">
                <i class="iconfont icon-houtaishangpinguanli"></i>
                <span>&emsp;商品管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/Index/productList">商品列表</el-menu-item>

                <el-menu-item index="/Index/productAdd">商品添加</el-menu-item>

                <el-menu-item index="/Index/classification"
                  >商品分类</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu> -->

            <!-- 店铺管理 -->
            <!-- <router-link to="/Index/store">
              <el-menu-item index="4">
                <i class="iconfont icon-jinrudianpu"></i>
                <span slot="title">&emsp;店铺管理</span>
              </el-menu-item>
            </router-link> -->
            <!-- 账号管理 -->
            <!-- <el-submenu index="5">
              <template slot="title">
                <i class="iconfont icon-zhanghao"></i>
                <span>&emsp;账号管理</span>
              </template>
              <el-menu-item-group>
                <router-link to="/Index/AccountList"
                  ><el-menu-item index="1-1"
                    >账号列表</el-menu-item
                  ></router-link
                >
                <router-link to="/Index/Addaccount"
                  ><el-menu-item index="1-2"
                    >添加账号</el-menu-item
                  ></router-link
                >
                <router-link to="/Index/ChangePw"
                  ><el-menu-item index="1-3"
                    >修改密码</el-menu-item
                  ></router-link
                >
              </el-menu-item-group>
            </el-submenu> -->

            <!-- 销售统计 -->
            <!-- <el-submenu index="6">
              <template slot="title">
                <i class="iconfont icon-tongji"></i>
                <span>&emsp;销售统计</span>
              </template>
              <el-menu-item-group>
                <router-link to="/Index/ProStatistics"
                  ><el-menu-item index="1-1"
                    >商品统计</el-menu-item
                  ></router-link
                >
                <router-link to="/Index/OrderStatistics"
                  ><el-menu-item index="1-2"
                    >订单统计</el-menu-item
                  ></router-link
                >
              </el-menu-item-group>
            </el-submenu> -->
            <!--  -->

            <!-- 循环 -->
            <div v-for="(item,i) in treelist" :key="i">
              <!-- 有下拉 -->
              <el-submenu v-if="item.child" :index="item.i">

                <template slot="title">
                  <i class="iconfont" :class="item.icon "></i>
                  <span>&emsp;{{item.name}}</span>
                </template>

                  <!-- <el-menu-item v-for="child in item.child" :key="child.i" :index="child.i">{{son.name}}</el-menu-item> -->
                  <el-menu-item v-for="child in item.child" :key="child.i" :index="child.i">{{child.name}}</el-menu-item>

              </el-submenu>
              <!-- 无下拉 -->
              <el-menu-item  v-else :index="item.i">
                <i class="iconfont" :class="item.icon"></i>
                <span slot="title">&emsp;{{item.name}}</span>
              </el-menu-item>  
            </div>
            <!--  -->
          </el-menu>
        </el-col>
      </div>
    </div>

    <div id="home-right">
      <div class="HR-nav">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div id="headImg">
          <span>欢迎您,小貂禅</span>
          <router-link to="/Index/Center">
            <img src="../assets/imgs/osakaka.png" alt="" />
          </router-link>
        </div>
      </div>

      <div id="continaer">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created(){
        console.log(location.hash.substring(1))
        let routerChild=location.hash.substring(1)
        this.active=routerChild
      },
  data() {
    return {
      active:'',
      activeName: "1",
      treelist: [
        { i: "/Index", icon: "icon-solid-home", name: "后台首页" },
        { i: "/Index/order", icon: "icon-065chakandingdan", name: "订单管理" },

        {
          i: "/Index/productList",
          icon: "icon-houtaishangpinguanli",
          name: "商品管理",
          child: [{ i: "/Index/productList", name: "商品列表" },{ i: "/Index/productAdd", name: "商品添加" },{ i: "/Index/classification", name: "商品分类" }],
        },

        { i: "/Index/store", icon: "icon-jinrudianpu", name: "店铺管理" },

        {
          i: "/Index/AccountList",
          icon: "icon-zhanghao",
          name: "账号管理",
          child: [{ i: "/Index/AccountList", name: "账号列表" },{ i: "/Index/Addaccount", name: "添加账号" },{ i: "/Index/ChangePw", name: "修改密码" }],
        },

        {
          i: "/Index/ProStatistics",
          icon: "icon-tongji",
          name: "销售统计",
          child: [{ i: "/Index/ProStatistics", name: "商品统计" },{ i: "/Index/OrderStatistics", name: "订单统计" }],
        },
      ],     
    };
  },

  components: {},

  methods: {

  },
};
</script>

<style lang="less" scoped>
a {
  text-decoration: none;
}
.el-menu {
  border: none;
}
#home {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.815);
  // background-color: @base-color;
  display: flex;
  #home-left {
    width: 15%;
    height: 100%;
    background-color: white;
    h3 {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;

      .p {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: rgba(0, 0, 0, 0.863);
        font-size: 30px;
        color: orange;
        display: flex;
        justify-content: center;
        align-items: center;

        #tabs {
          width: 100%;
        }
      }
    }
  }

  #home-right {
    width: 85%;
    height: 100%;
    display: flex;
    flex-direction: column;

    // background-color: blanchedalmond;

    .HR-nav {
      width: 100%;
      height: 100px;
      background-color: white;
      display: flex;
      align-items: center;
      position: relative;

      #headImg {
        width: 200px;
        justify-content: space-around;
        display: flex;
        align-items: center;
        position: absolute;
        right: 50px;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50px;
          background-color: wheat;
          overflow: hidden;
        }
      }
    }
    #continaer {
      width: 100%;
      // height: 500px;
      overflow: auto;
      padding: 20px;
      background-color: whitesmoke;
    }
  }
}
</style>